import React, { Component } from "react";
import { Input } from "antd";
import "./ShowFillInBlank.less";

class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {
            stuAnswer: []
        };
        this.createQuestion = this.createQuestion.bind(this)
        this.createTrueAnswer = this.createTrueAnswer.bind(this)
        this.createStudentAnswer = this.createStudentAnswer.bind(this)
    }

    createQuestion() {
        if (this.props.question) {
            const questionFragments = this.props.question.split("[____]");
            const length = questionFragments.length;
            return <div className="row">
                <div className="col label">
                    <span>{this.props.index}.</span>
                </div>
                <div className="col context">
                    <span>(填空题 {this.props.score || 0}分)</span>
                    {questionFragments.map((fragment, index) => {
                        if (index + 1 >= length) {
                            return <span key={index}>{fragment}</span>;
                        }
                        return [<span key={index}>{fragment}</span>, <Input className="input" onChange={(e) => {
                            const nextStuAnswer = JSON.parse(JSON.stringify({ data: this.state.stuAnswer })).data
                            nextStuAnswer[index] = e.target.value
                            this.setState({
                                stuAnswer: nextStuAnswer
                            }, () => {
                                this.props.onChange(this.state.stuAnswer)
                            })
                        }} />];
                    })}
                </div>
            </div>
        }
        return null
    }

    createTrueAnswer() {
        return <div className="row">
            <div className="col label true-answer">
                <span>参考答案：</span>
            </div>
            <div className="col context">
                <span>{this.props.trueAnswer}</span>
            </div>
        </div>
    }

    createStudentAnswer() {
        const style = {}
        const { trueAnswer, studentAnswer } = this.props
        if (trueAnswer?.toString?.() === studentAnswer?.toString?.()) {
            style.color = '#52c41a'
        } else {
            style.color = '#f5222d'
        }
        return <div className="row">
            <div className="col label true-answer">
                <span>学生答案：</span>
            </div>
            <div className="col context" style={style}>
                <span>{studentAnswer}</span>
            </div>
        </div>
    }

    render() {
        // 正则表达式
        // const reg = /\[__\$\$__\]/g
        const { showTrueAnswer, showStudentAnswer } = this.props
        return (
            <div className={`show-fill-in-blank ${this.props.className}`}>
                {this.createQuestion()}
                {showTrueAnswer ? this.createTrueAnswer() : null}
                {showStudentAnswer ? this.createStudentAnswer() : null}
            </div>
        );
    }
}

export default Index;
